import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
@Component({
  selector: 'app-machine-cabinet',
  templateUrl: './machine-cabinet.component.html',
  styleUrls: ['./machine-cabinet.component.scss']
})
export class MachineCabinetComponent implements OnInit {
  isOpenOne = true;
  constructor() { }

  ngOnInit() {

  var Q= window['Q']
    var graph =new Q.Graph('cabinet');
		graph.originAtCenter = false;
		var l=graph.toLogical(200,395)
	var cabinet= graph.createNode("cabinet",l.x,l.y)
  		cabinet.image='assets/ddd.png'

	graph.isSelectable = function(item){ 
			console.log(item);		
			return item.name === "computer";
	};

var src ,startX,startY;
	$(document).mousedown(function(e){
		// console.log(e);
		src = e.target['src'].split("/")[4];
		// console.log(src);
	
		startX=e.offsetX;
		startY=e.offsetY;
	})
	$(document).mousemove(function(e){
		
		
	})
	$(document)[0].ondrop=function(e){
		// console.log(e.offsetY);
			if((e.offsetY-70)%17>10){
				var y=	Math.floor((e.offsetY-70)/17)*17+17+70
			}else{
				y=	Math.floor((e.offsetY-70)/17)*17+70
			}
		var p =	graph.toLogical(200,y)
			var computer= graph.createNode("computer",p.x,p.y)
			computer.image='assets/'+src;
			computer.size = {height: 68,width:200}
			
			
	}
var uiId,starty
	//对拖过来的服务器添加鼠标移动事件；
	graph.onstart = function(evt){
		//鼠标按下事件
		console.log("鼠标按下事件");
		console.log(evt);
		//记录鼠标按下的位置和对象
		uiId=evt.uiId;
		startY=evt.offsetY;

	}
	graph.enddrag = function(evt){
		
	}

  }

}
